import 'package:flutter/material.dart';
import 'package:flutter_app/components/layout.dart';
import './order.dart';
import 'package:qr_flutter/qr_flutter.dart';
import 'package:flutter_app/utils/AppUtil.dart';
class LeverPage extends StatefulWidget {
  int type;
  LeverPage({this.type});
  @override
  _LeverPageState createState() => _LeverPageState();
}

Widget TitleText(String text) {
  return Text(text, style: TextStyle(color: Colors.black54));
}

Widget HeaderButton({Function onPressed, bool isActive, String text}) {
  return Expanded(
      child: FlatButton(
          onPressed: onPressed,
          color: isActive ? Colors.white : Colors.transparent,
          child: Text(
            text,
            style: TextStyle(
                color: isActive ? Colors.black : Colors.black26, fontSize: 14),
          )));
}

class BondItem {
  String coin;
  String img;
  double available;

  BondItem({this.coin, this.available, this.img});
}

List<BondItem> BondItems = [
  BondItem(coin: 'BTC', available: 0.00, img: "assets/images/ic_btc.png"),
  BondItem(
      coin: 'USDC', available: 0.00, img: "assets/images/coins/ic_usdc.png"),
  BondItem(coin: 'USDT', available: 0.00, img: "assets/images/ic_usdt.png"),
];

Widget selectItemBox(context, {String imgUrl, Widget child}) {
  return Row(
    children: [
      Image.asset(
        imgUrl,
        width: 35,
      ),
      Expanded(
        child: Container(
            margin: EdgeInsets.only(left: 20.0),
            padding: EdgeInsets.symmetric(vertical: 20.0),
            decoration: BoxDecoration(
                border: Border(
                    bottom: BorderSide(
                        color: Theme.of(context).dividerColor, width: 1.0))),
            child: child),
      )
    ],
  );
}

class _LeverPageState extends State<LeverPage> {
  int active = 0;
  bool isAgree = false;
  double _sliderValue = 1.1;
  String address='0XSHI908888...XHSAKSH7782BHSAHI9088';
  setActive(int c) {
    setState(() {
      active = c;
    });
  }

  @override
  void initState() {
    super.initState();
    setActive(widget.type ?? 0);
  }

  List<Widget> getBondItem() {
    return BondItems.map((item) {
      return selectItemBox(context,
          imgUrl: item.img,
          child: ColumnStart(children: [
            Text(
              item.coin,
              style: TextStyle(
                  color: Colors.black,
                  fontWeight: FontWeight.w600,
                  fontSize: 16),
            ),
            SizedBox(height: 5),
            Text(
              '可用余额:' + item.available.toString(),
              style: TextStyle(color: Colors.grey, fontSize: 12),
            ),
          ]));
    }).toList();
  }

  List<Widget> getHedgeCoin() {
    return [1, 1, 1, 1, 1, 1, 1, 1, 1, 1].map((item) {
      return selectItemBox(context,
          imgUrl: 'assets/images/ic_btc.png',
          child: Text(
            'BTC/USDC',
            style: TextStyle(
                color: Colors.black, fontWeight: FontWeight.w500, fontSize: 16),
          ));
    }).toList();
  }

  void showSelectCoin() {
    GetBottomSheet(context, height: 290.0, text: '币种', children: [
      Column(
        children: getBondItem(),
      )
    ]);
  }

  void showHedgeCoin() {
    GetBottomSheet(context, text: '币种', children: getHedgeCoin());
  }

  void showCharge() {
    GetBottomSheet(context,
        children: [
          SizedBox(height: 20),
          Container(
            padding: EdgeInsets.all(19.0),
            decoration: BoxDecoration(
              image: DecorationImage(
                // alignment: Alignment(0.9, 0.5),
                image: AssetImage("assets/images/bg_qrcode_frame.png"),
                fit: BoxFit.contain,
              ),
            ),
            child: QrImage(
              //二维码设置前后背景色，不设置的情况下保存图片后因为是png格式的，白色透明的地方都是黑色的，导致查看图片时就是一个黑图
              foregroundColor: Colors.black, //前景色
              backgroundColor: Colors.white, //背景色
              data: "123333",
              size: 160,
            ),
          ),
          SizedBox(height: 20),
          Container(
            margin: EdgeInsets.only(right: 15.0),
            alignment: Alignment.center,
            padding: EdgeInsets.symmetric(horizontal: 15.0, vertical: 15.0),
            decoration: BoxDecoration(
              color: Colors.grey.withOpacity(0.07),
              borderRadius: BorderRadius.circular(100),
            ),
            child: Text(
              address,
              style: TextStyle(color: Colors.black45),
            ),
          ),
          SizedBox(height: 20),
          Container(
            height: 45,
            width: 200,
            child: FlatButton(
                color: Colors.blueAccent,
                textColor: Colors.white,
                onPressed: () {AppUtil.copy(address);},
                child: Text('复制地址')),
          ),
          SizedBox(height: 20),
        ],
        text: '充币BTC');
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        brightness: Brightness.light,
        iconTheme: IconThemeData(
          color: Colors.black, //修改颜色
        ),
        backgroundColor: Colors.transparent,
        elevation: 0,
        title: Container(
          height: 30,
          width: 150,
          padding: EdgeInsets.symmetric(vertical: 2, horizontal: 2),
          decoration: BoxDecoration(color: Colors.grey.withOpacity(0.2)),
          child: Row(
            children: [
              HeaderButton(
                onPressed: () {
                  setActive(0);
                },
                text: '囤币',
                isActive: active == 0 ? true : false,
              ),
              HeaderButton(
                onPressed: () {
                  setActive(1);
                },
                text: '套保',
                isActive: active == 1 ? true : false,
              ),
            ],
          ),
        ),
        centerTitle: true,
        actions: [
          TextButton(
              onPressed: () {
                Navigator.push(context, MaterialPageRoute(builder: (context) {
                  return LeverOrderPage(type: active);
                }));
                // Navigator.pushNamed(context, '/lever/order');
              },
              child: Text(
                '我的订单',
                style: TextStyle(color: Colors.black),
              ))
        ],
      ),
      body: Column(
        children: [
          Padding(
            padding: EdgeInsets.symmetric(horizontal: 15.0),
            child: Column(
              children: [
                SizedBox(
                  height: 20,
                ),
                Container(
                  padding:
                      EdgeInsets.symmetric(horizontal: 15.0, vertical: 10.0),
                  decoration:
                      BoxDecoration(color: Colors.grey.withOpacity(0.08)),
                  child: RowBetween(
                    children: [
                      Text('BTC/USDT 卖出价格'),
                      Row(
                        children: [
                          Text(
                            '\$49,188.39',
                            style: TextStyle(color: Colors.blueAccent),
                          ),
                          Text('1s'),
                        ],
                      )
                    ],
                  ),
                ),
                SizedBox(
                  height: 20,
                ),
              ],
            ),
          ),
          Expanded(
              child: SingleChildScrollView(
            child: Padding(
              padding: const EdgeInsets.symmetric(horizontal: 15.0),
              child: Column(
                children: [
                  ColumnStart(
                    children: [
                      MainTitle('套保金额'),
                      Container(
                        decoration: BoxDecoration(
                          border: new Border(
                              bottom: new BorderSide(
                                  color: Theme.of(context).dividerColor,
                                  width: 1.0)),
                        ),
                        child: Row(
                          children: [
                            Expanded(
                              child: TextField(
                                  decoration: InputDecoration(
                                      hintText: '0.056-40.64',
                                      hintStyle: TextStyle(color: Colors.grey),
                                      border: OutlineInputBorder(
                                          borderSide: BorderSide.none),
                                      contentPadding:
                                          const EdgeInsets.symmetric(
                                              vertical: 0.0))),
                            ),
                            TextButton(onPressed: () {}, child: Text('Max')),
                            VerticalDivideLine(),
                            SizedBox(width: 10),
                            GestureDetector(
                              onTap: () => showHedgeCoin(),
                              child: Row(
                                children: [
                                  Image.asset(
                                    'assets/images/ic_btc.png',
                                    width: 28,
                                    height: 28,
                                  ),
                                  SizedBox(width: 6.0),
                                  Text('BTC',
                                      style: TextStyle(
                                          fontWeight: FontWeight.w500)),
                                  Icon(
                                    Icons.arrow_drop_down_rounded,
                                    size: 30,
                                  )
                                ],
                              ),
                            )
                          ],
                        ),
                      )
                    ],
                  ),
                  SizedBox(
                    height: 30,
                  ),
                  ColumnStart(
                    children: [
                      MainTitle('杠杆倍数'),
                      Row(
                        children: [
                          Text('1.1x'),
                          Expanded(
                              child: SliderTheme(
                            data: SliderTheme.of(context).copyWith(
                              activeTickMarkColor: Colors.transparent,
                              inactiveTickMarkColor: Colors.transparent,
                              valueIndicatorShape:
                                  PaddleSliderValueIndicatorShape(),
                            ),
                            child: Slider(
                              value: _sliderValue,
                              label: '$_sliderValue\X',
                              min: 1.0,
                              max: 5.0,
                              divisions: 40,
                              inactiveColor: active == 1
                                  ? Colors.blueAccent
                                  : Colors.orange,
                              activeColor: active == 1
                                  ? Colors.blueAccent
                                  : Colors.orange,
                              onChanged: (v) {
                                setState(() {
                                  _sliderValue = v;
                                });
                              },
                            ),
                          )),
                          Text('5x'),
                        ],
                      )
                    ],
                  ),
                  SizedBox(
                    height: 20,
                  ),
                  ColumnStart(
                    children: [
                      MainTitle('所需保证金'),
                      SizedBox(
                        height: 8,
                      ),
                      Container(
                        decoration: BoxDecoration(
                          color: Colors.grey.withOpacity(0.08),
                          borderRadius: BorderRadius.circular(3),
                        ),
                        child: Padding(
                          padding: const EdgeInsets.symmetric(
                              vertical: 0.0, horizontal: 14.0),
                          child: Row(
                            children: [
                              Expanded(
                                child: TextField(
                                    decoration: InputDecoration(
                                        hintText: '0.013-10.16',
                                        hintStyle:
                                            TextStyle(color: Colors.grey),
                                        border: OutlineInputBorder(
                                            borderSide: BorderSide.none),
                                        contentPadding:
                                            const EdgeInsets.symmetric(
                                                vertical: 0.0))),
                              ),
                              SizedBox(
                                width: 20.0,
                              ),
                              GestureDetector(
                                onTap: () => showSelectCoin(),
                                child: Row(children: [
                                  Image.asset(
                                    'assets/images/ic_btc.png',
                                    width: 28,
                                    height: 28,
                                  ),
                                  SizedBox(width: 6.0),
                                  Text('BTC',
                                      style: TextStyle(
                                          fontWeight: FontWeight.w600)),
                                  SizedBox(
                                    width: 15,
                                    child: Icon(
                                      Icons.arrow_drop_down_rounded,
                                      size: 30,
                                    ),
                                  ),
                                ]),
                              )
                            ],
                          ),
                        ),
                      ),
                      Row(
                        children: [
                          Text('可用余额：0.00 BTC'),
                          TextButton(onPressed: showCharge, child: Text('充值'))
                        ],
                      ),
                      Container(
                        padding: EdgeInsets.symmetric(
                            horizontal: 15.0, vertical: 15.0),
                        decoration:
                            BoxDecoration(color: Colors.grey.withOpacity(0.08)),
                        child: Column(
                          children: [
                            RowBetween(children: [
                              TitleText('融资金额'),
                              Text('--'),
                            ]),
                            SizedBox(height: 10),
                            RowBetween(children: [
                              TitleText('融资利率'),
                              Text(
                                '0.000457%/时(0.0109%/天)',
                                style: TextStyle(
                                    color: Colors.black,
                                    fontWeight: FontWeight.w500),
                              ),
                            ]),
                            SizedBox(height: 10),
                            RowBetween(children: [
                              TitleText('平仓价格'),
                              Text('--'),
                            ]),
                            SizedBox(height: 10),
                            RowBetween(children: [
                              TitleText('本单持仓'),
                              Text('--'),
                            ])
                          ],
                        ),
                      ),
                      SizedBox(
                        height: 10,
                      ),
                      Text(
                        '你的BTC保证金也将被交易为USDT持仓',
                        style: TextStyle(color: Colors.grey, fontSize: 13),
                      ),
                      SizedBox(
                        height: 20,
                      ),
                      RowBetween(
                        children: [
                          MainTitle('产品介绍'),
                          Icon(
                            Icons.arrow_forward_ios_rounded,
                            size: 16,
                            color: Colors.grey,
                          )
                        ],
                      ),
                      SizedBox(
                        height: 20,
                      ),
                      RowBetween(
                        children: [
                          MainTitle('收益测算'),
                          Icon(
                            Icons.arrow_forward_ios_rounded,
                            size: 16,
                            color: Colors.grey,
                          )
                        ],
                      )
                    ],
                  ),
                ],
              ),
            ),
          )),
          //底部
          Container(
            padding: EdgeInsets.symmetric(vertical: 5.0, horizontal: 15.0),
            child: Column(
              children: [
                Row(
                  children: [
                    SizedBox(
                      height: 24.0,
                      width: 28.0,
                      child: Checkbox(
                        value: isAgree,
                        onChanged: (bool value) {
                          setState(() {
                            this.isAgree = value;
                          });
                        },
                      ),
                    ),
                    Text('我已阅读且同意',
                        style: TextStyle(fontSize: 13, color: Colors.black54)),
                    TextButton(
                        onPressed: () {
                          Navigator.pushNamed(context, '/lever/agreement');
                        },
                        child: Text(
                          '《套保交易协议》',
                          style:
                              TextStyle(color: Colors.blueAccent, fontSize: 13),
                        ))
                  ],
                ),
                Row(
                  children: [
                    Expanded(
                        child: FlatButton(
                            color: Colors.grey.withOpacity(0.4),
                            textColor: Colors.white,
                            onPressed: () {},
                            child: Text("一键囤币(做多BTC)"))),
                  ],
                ),
                Text(
                  '点击按钮将立刻以当前价格完成交易',
                  style: TextStyle(color: Colors.grey, fontSize: 13),
                )
              ],
            ),
          ),
        ],
      ),
    );
  }
}
